<template>

	<div class="">
		<!--基本信息-->
		<div class="common-form">分销海报设置</div>
		<div class="poster-box d-s-s" v-loading="loading">
			<div class="left-box">
				<div v-if="form.backdrop" class=""><img v-img-url="form.backdrop.src" /></div>
				<div class="userinfo">
					<div
						class="photo pa"
						v-drag="{ type: 'photo', obj: curObj }"
						:class="{ radius: form.avatar.style == 'circle' }"
						:style="'width:' + form.avatar.width + 'px;height:' + form.avatar.width + 'px;top:' + form.avatar.top + 'px;left:' + form.avatar.left + 'px;'"
					>
						<span class="icon iconfont icon-yonghu"></span>
					</div>
					<div
						class="name pa"
						v-drag="{ type: 'name', obj: curObj }"
						:style="'font-size:' + form.nickName.fontSize + 'px;color:' + form.nickName.color + ';top:' + form.nickName.top + 'px;left:' + form.nickName.left + 'px;'"
					>
						昵称
					</div>
					<div
						class="code pa"
						v-drag="{ type: 'code', obj: curObj }"
						:class="{ radius: form.qrcode.style == 'circle' }"
						:style="'width:' + form.qrcode.width + 'px;height:' + form.qrcode.width + 'px;top:' + form.qrcode.top + 'px;left:' + form.qrcode.left + 'px;'"
					>
						<img src="../../../../assets/img/qrcode.png" alt="" />
					</div>
				</div>
			</div>
			<div class="right-box flex-1">
				<el-form size="small" ref="form" :model="form" label-width="200px">
					<el-form-item label="海报背景图">
						<el-button type="primary" @click="openUpload(1)">上传图片</el-button>
						<div class="tips">尺寸：750px*1334像素</div>
					</el-form-item>
					<el-form-item label="用户头像宽度" prop="avatar.width" :rules="[{ required: true, message: ' ' }]">
						<el-input v-model="form.avatar.width" min="30" type="number" class="max-w460"></el-input>
					</el-form-item>
					<el-form-item label="用户头像样式">
						<el-radio v-model="form.avatar.style" label="square">正方形</el-radio>
						<el-radio v-model="form.avatar.style" label="circle">圆形</el-radio>
					</el-form-item>
					<el-form-item label="用户昵称字体大小" prop="nickName.fontSize" :rules="[{ required: true, message: ' ' }]">
						<el-input v-model="form.nickName.fontSize" min="12" type="number" class="max-w460"></el-input>
					</el-form-item>
					<el-form-item label="用户昵称字体颜色">
						<div class="d-s-c">
							<el-color-picker v-model="form.nickName.color"></el-color-picker>
							<el-button type="button" style="margin-left: 10px;" @click.stop="$parent.onEditorResetColor(form.nickName, 'color', '#ffffff')">重置</el-button>
						</div>
					</el-form-item>
					<el-form-item label="二维码宽度 " prop="qrcode.width" :rules="[{ required: true, message: ' ' }]">
						<el-input v-model="form.qrcode.width" min="50" type="number" class="max-w460"></el-input>
					</el-form-item>
					<el-form-item label="二维码样式 ">
						<el-radio v-model="form.qrcode.style" label="square">正方形</el-radio>
						<el-radio v-model="form.qrcode.style" label="circle">圆形</el-radio>
					</el-form-item>
					<!--用户头像横向距离-->
					<el-form-item label="用户头像横向距离">
						<el-slider class="max-w460" v-model="form.avatar.left" :max="375" size="small" show-input :show-input-controls="false" input-size="small"></el-slider>
					</el-form-item>
					<!--用户头像纵向距离-->
					<el-form-item label="用户头像纵向距离">
						<el-slider class="max-w460" v-model="form.avatar.top" :max="667" size="small" show-input :show-input-controls="false" input-size="small"></el-slider>
					</el-form-item>
					<!--用户昵称横向距离-->
					<el-form-item label="用户昵称横向距离">
						<el-slider class="max-w460" v-model="form.nickName.left" :max="375" size="small" show-input :show-input-controls="false" input-size="small"></el-slider>
					</el-form-item>
					<!--用户昵称纵向距离-->
					<el-form-item label="用户昵称纵向距离">
						<el-slider class="max-w460" v-model="form.nickName.top" :max="667" size="small" show-input :show-input-controls="false" input-size="small"></el-slider>
					</el-form-item>
					<!--二维码横向距离-->
					<el-form-item label="二维码横向距离">
						<el-slider class="max-w460" v-model="form.qrcode.left" :max="375" size="small" show-input :show-input-controls="false" input-size="small"></el-slider>
					</el-form-item>
					<!--二维码纵向距离-->
					<el-form-item label="二维码纵向距离">
						<el-slider class="max-w460" v-model="form.qrcode.top" :max="667" size="small" show-input :show-input-controls="false" input-size="small"></el-slider>
					</el-form-item>

					<!--提交-->
					<div class="common-button-wrapper"><el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button></div>
				</el-form>
			</div>
		</div>
		<!--上传图片组件-->
		<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
	</div>
</template>

<script>
import Upload from '@/components/file/Upload.vue';
import { GetBackground, SaveBackground } from '@/api/plus.js';
export default {
	components: {
		Upload: Upload
	},
	data() {
		return {
			form: {
				nickName: {
					fontSize: 20,
					color: '',
					left: 0,
					top: 0
				},
				avatar: {
					width: 30,
					style: 'square',
					left: 0,
					top: 0
				},
				qrcode: {
					width: 50,
					style: 'square',
					left: 0,
					top: 0
				},
				backdrop: {
					src: ''
				}
			},
			/**/
			loading: true,
			/*是否上传图片*/
			isupload: false,
			/*当前对象*/
			curObj: this
		};
	},
	created() {
		/*获取数据*/
		this.getData();
	},
	directives: {
		/*拖动指令*/
		drag: {
			mounted(el, binding) {
				let self = this;
				el.onmousedown = function(event) {
					event = event || window.event;
					let diffX = event.clientX - el.offsetLeft;
					let diffY = event.clientY - el.offsetTop;

					/*鼠标移动*/
					document.onmousemove = function(event) {
						event = event || window.event;
						let moveX = event.clientX - diffX;
						let moveY = event.clientY - diffY;
						binding.value.obj.dragDiv(moveX, moveY, binding.value.type);
					};

					/*鼠标弹起*/
					document.onmouseup = function(event) {
						document.onmousemove = null;
						document.onmouseup = null;
					};
				};
			}
		}
	},
	methods: {
		/*拖动赋值*/
		dragDiv(x, y, type) {
			if (x < 0) {
				x = 0;
			}
			if (y < 0) {
				y = 0;
			}
			if (type == 'photo') {
				this.form.avatar.left = x;
				this.form.avatar.top = y;
			} else if (type == 'code') {
				this.form.qrcode.left = x;
				this.form.qrcode.top = y;
			} else if (type == 'name') {
				this.form.nickName.left = x;
				this.form.nickName.top = y;
			}
		},

		/*上传*/
		openUpload(e) {
			this.type = e;
			this.isupload = true;
		},

		/*获取图片*/
		returnImgsFunc(e) {
			if (e != null) {
				if (this.type == 1) {
					this.form.backdrop.src = e[0].file_path;
				}
				if (this.type == 2) {
					this.form.apply = e[0].file_path;
				}
				if (this.type == 3) {
					this.form.cash_apply = e[0].file_path;
				}
			}
			this.isupload = false;
		},

		/*获取数据*/
		getData() {
			let self = this;
			GetBackground({}, true)
				.then(data => {
					self.form = data.data.data;
					self.form.avatar.left = self.form.avatar.left * 1;
					self.form.avatar.top = self.form.avatar.top * 1;
					self.form.nickName.left = self.form.nickName.left * 1;
					self.form.nickName.top = self.form.nickName.top * 1;
					self.form.qrcode.left = self.form.qrcode.left * 1;
					self.form.qrcode.top = self.form.qrcode.top * 1;
					self.loading = false;
				})
				.catch(error => {});
		},

		//提交表单
		onSubmit() {
			let self = this;
			let form = self.form;
			self.$refs.form.validate(valid => {
				if (valid) {
					self.loading = true;
					SaveBackground(
						{
							form
						},
						true
					)
						.then(data => {
							self.loading = false;
							ElMessage({
								message: '恭喜你，保存成功',
								type: 'success'
							});
							self.getData();
						})
						.catch(error => {
							self.loading = false;
						});
				}
			});
		}
	}
};
</script>

<style>
.poster-box .left-box {
	position: relative;
	width: 375px;
	height: 667px;
	overflow: hidden;
	margin: 0 30px;
	border: 1px solid #cccccc;
	border-radius: 18px;
	box-sizing: content-box;
}
.poster-box .left-box .userinfo {
	position: absolute;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.poster-box .left-box .userinfo .photo {
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: #eee;
	cursor: pointer;
}
.poster-box .left-box .userinfo .photo .svg-icon {
	width: 80%;
	height: 80%;
	font-size: 60px;
	color: #3a8ee6;
}
.poster-box .left-box .userinfo .photo img {
	width: 80%;
	height: 80%;
}
.poster-box .left-box img {
	width: 100%;
}
.poster-box .left-box .userinfo .name {
	min-height: 30px;
	line-height: 100%;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}
.poster-box .left-box .userinfo .code {
	cursor: pointer;
	overflow: hidden;
}
.poster-box .left-box .userinfo .code img {
	width: 100%;
	height: 100%;
}
</style>
